<!DOCTYPE html>
<html>

<head>
  <title>我与战鹰合个影</title>
  <link rel="stylesheet" href="/css/style.css" />
</head>

<body>
  <div class="body_container">
    <div style="display: none;">
      <img src="/images/code.png" id="qr_code">
      <img src="/images/slogan.png" id="slogan">
      <img src="/images/title1.png" id="wordpic">
    </div>
    <div id="layout" class="layout">
      <img src="/images/loading.gif" /></div>
    <!-- <img src="/images/headbg.jpeg" class="headerbg"> -->
    <canvas id="myCanvas" class="myCanvas" style="border:1px solid #d3d3d3;display: none;" width="800" height="1200">
    </canvas>
    <img class="createfacebg" id="facebg" style="display: none;" />
    <div class="sharecontainer" id="sharemodal" style="display: none;">
      <img class="myCanvas" id="canvas_toimage" style="display: none;z-index: 2;">
      <div class="tip">
        <img src="/images/press.png" class="press">
        长按图片保存分享
      </div>
      <img src="/images/close.png" width="50" class="close_button">
    </div>
    <div class="face_container" id="createface">

      <div class="outer">
        <img src="/images/yz.png" id="example" style="width: 600px;height:898.66px" />
        <img id="target" src="" style="display: none;width: 600px;height:898.66px" />
        <img src="/images/border.png" class="outerborder" style="display: none;" id="outerborder">
      </div>
      <form id="uface">
        <a href="javascript:;" class="a-upload">
          <input type="file" name="files" id="upload" />上传照片
        </a>
        <div class="showFileName" style="display: none;"></div>
        <div>
          <button type="button" onClick="mergeImg()" class="button_style" style="display: none;"
            id="buildphoto">生成照片</button>
        </div>
        <div>
          <button type="button" onClick="solveshare()" class="button_style" id="share"
            style="display: none;">分享</button>
        </div>
      </form>
    </div>

    <!-- 模态框 -->
    <div id="myModal" class="modal">

      <!-- Modal content -->
      <div class="modal-content">
        <div class="modal-header">
          <h2>请选择性别</h2>
        </div>
        <div class="modal-body">
          <div class="input_container">
            <div class="input_item">
              <img src="/images/man.png" id="man_button">
            </div>
            <div class="input_item">
              <img src="/images/women.png" id="woman_button">
            </div>
          </div>

        </div>

      </div>

    </div>
  </div>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="/js/index.js"></script>
  <!-- 引入组件库 -->
</body>

</html>